<template>
  <view class="industry-wrap">
    <view class="topPart" :style="{backgroundImage: 'url(' + bgImage +')'}">
      <view class="sortList">
        <view class="sortItem" @click="orderBy(0)">综合</view>
        <view class="sortItem" @click="orderBy(1)">销量
          <image :src="$store.state.imgBaseUrl + '/icon/sort.png'" class="sortImg" v-if="sortIndex != 1"></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-up.png'" class="sortImg" v-if="ascs == sortBy[1]"></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-down.png'" class="sortImg" v-if="descs == sortBy[1]"></image>
        </view>
        <view class="sortItem" @click="orderBy(2)" :style="{'border-right': showIndustry ? '4rpx solid #fff' : '0rpx'}">价格
          <image :src="$store.state.imgBaseUrl + '/icon/sort.png'" class="sortImg" v-if="sortIndex != 2"></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-up.png'" class="sortImg" v-if="ascs == 'discountPrice' || ascs == 'price' "></image>
          <image :src="$store.state.imgBaseUrl + '/icon/sort-down.png'" class="sortImg" v-if="descs == 'discountPrice' || descs == 'price'"></image>
        </view>
        <view class="sortItem" style="border-right:0rpx;" v-if="showIndustry">
          <picker @change="pickerChange" :value="price" :range="priceList" range-key="name">
            <view class="uni-input">{{priceList[price].name}}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="goodList"  v-if="goodList && goodList.length > 0">
      <scroll-view scroll-y="true" class="" style="height: 1184rpx;" @scrolltolower="lower">
        <view class="goodItem" v-for="(item, index) in goodList" :key="index" @click="jumpDetails(item.id)">
          <image :src="item.imageUrl" class="goodImg"></image>
          <view class="goodDes dhColor" >
            <view class="title text2Ellipsis">{{item.name}}</view>
            <view class="price">
              <text class="ft36">￥{{item.price}}</text>
              <text class="orgPrice">原价¥{{item.retailPrice}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view style="display: flex; flex-direction: column; align-items: center;height: 1030rpx;" v-if="isRequest&&(!goodList || goodList.length==0)">
      <image :src="$store.state.imgBaseUrl + '/empty_list.png'" style="width: 340rpx;height: 340rpx;margin-top: 153rpx;"></image>
      <text style="height:36rpx;font-size:38rpx;font-weight:500;color:rgba(51,51,51,1);line-height: 36rpx;">暂无数据</text>
      <text style="height:29rpx;font-size:30rpx;font-weight:500;color:rgba(102,102,102,1);line-height: 29rpx;margin-top: 35rpx;">先去逛逛吧~</text>
    </view>
    <view v-show="showChoice">
      <view class="cover" @click="clickCover"></view>
      <scroll-view scroll-y="true" class="choice-list">
        <view v-for="(item,index) in dataList" :key="index" @click="setIndustry(item)">
          <text class="name-text">{{item.name}}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { findRecommend } from "../../service/purchaseShop/purchaseShop.service.js"
import { findGoodsByIndustry } from '@/service/purchaseShop/industry.service.js'
import { findHotSaleApi } from '@/service/purchaseShop/hotsale.service.js'
export default {
  data() {
    return{
      sortBy: ['pp.order_number', 'pp.sales_volume', 'price'],
      sortIndex: 2,
      ascs: 'price',
      descs: '',
      showChoice: false,
      showIndustry: false,
      goodList: [],
      page: {
        size: 10,
        current: 1,
        count: 0
      },
      industryId:'',
      dataList: [],
      price:0,
      priceList: [
        {id:'',priceMin:'',priceMax:'',name:'价格区间'},
        {id:0,priceMin:1,priceMax:100,name:'1-100'},
        {id:1,priceMin:100,priceMax:300,name:'100-300'},
        {id:2,priceMin:300,priceMax:1000,name:'300-1000'},
        {id:3,priceMin:1000,priceMax:5000,name:'1000-5000'},
        {id:4,priceMin:5000,priceMax:'',name:'5000以上'},
      ],
      industryIndex: 0,
      isRequest:false,
      bgImage: this.$store.state.imgBaseUrl + '/goods_list_bg.png',
    }
  },
  created() {
    this.showIndustry ? this.getGoodsByIndustry() : this.getHotSale()
  },
  methods: {
    orderBy (index) {
      this.sortIndex = index
      let type = this.sortBy[index]
      if (!this.ascs) {
        this.ascs = type
        this.descs = ''
      } else {
        this.descs = type
        this.ascs = ''
      }
      this.page.current = 1
      this.showIndustry ? this.getGoodsByIndustry() : this.getHotSale()
    },
    getHotSale () {
      let params = {
        size: this.page.size,
        current: this.page.current
      }
      params = this.orderByField(params)
      findHotSaleApi(params, res => {
        if (res.data) {
          this.getData(res.data)
        }
      })
    },
    getGoodsByIndustry () {
      let params = {
        tagId: this.industryId,
        size: this.page.size,
        current: this.page.current,
        priceMin: this.page.priceMin,
        priceMax: this.page.priceMax,
      }
      params = this.orderByField(params)
      findRecommend(params,(res => {
        if (res.data) {
          this.getData(res.data)
        }
      }))
    },
    getData (data) {
      this.isRequest = true
      if (this.page.current === 1) {
        this.goodList = data.records
      } else {
        this.goodList = this.goodList.concat(data.records)
      }
      this.page.count = data.total
    },
    lower () {
      if (this.page.count > this.goodList.length) {
        this.page.current++
        this.showIndustry ? this.getGoodsByIndustry() : this.getHotSale()
      }
    },
    orderByField (params) {
      params.ascs = this.ascs
      params.descs = this.descs
      return params
    },
    jumpDetails(id){
      uni.navigateTo({
        url: '/pages/purchaseShop/goodsDetail?id=' + id
      })
    },
    clickCover(){
      this.showChoice = false
    },
    chooseIndustry(){
      this.showChoice = !this.showChoice
    },
    pickerChange (e) {
      this.price = e.detail.value;
      this.page.priceMin = this.priceList[e.detail.value].priceMin;
      this.page.priceMax = this.priceList[e.detail.value].priceMax;
      this.getGoodsByIndustry()
    },
    setIndustry(item){
      this.showChoice = false
      this.industryId = item.id
      this.page.current = 1
      this.getGoodsByIndustry()
    }
  },
  onShow() {
    // 
  },
  onLoad(option) {
    this.page.priceMin = option.priceMin;
    this.page.priceMax = option.priceMax;
    this.showIndustry = option.type != 'hotsale';
  }
}
</script>

<style  scoped lang="scss">
.industry-wrap{
	background: #FFFFFF;
	.topPart{
		height: 300rpx;
		overflow: hidden;
		background-size: 100% 100%;
		.sortList{
			margin-top: 50rpx;
			line-height:  20rpx;
			height: 20rpx;
			display: flex;
			align-items: center;
			.sortItem{font-size: 28rpx;color: #fff;border-right: 2px solid #fff;flex:1;text-align: center;
			  .sortImg{
			    width: 14rpx;
			    height: 24rpx;
			    margin-left: 10rpx;
			  }
			  .arrow-image{
			    width: 44rpx;
			    height: 44rpx;
			  }
			}
		}
	}
	.goodList{
		width: 700rpx;margin:-160rpx auto 0 auto;
		.goodItem{
			width: 700rpx;
			height: 240rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			box-shadow:0 0 15rpx rgba(0,0,0,0.16);
			background: #FFFFFF;
			position: relative;
			.goodImg{width: 200rpx;height: 200rpx;float: left;}
			.dhColor{color: #C2A25C;}
			.goodDes{
			  margin-left: 222rpx;
			  height: 100%;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  .title{color: #333;line-height: 44rpx;height: 88rpx;font-size:32rpx;}
				.text2Ellipsis {
				    overflow: hidden;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 2;
				    -webkit-box-orient: vertical;
				}
				.price{
				  font-size: 20rpx;
				  line-height: 20rpx;
				  .ft36{font-size: 36rpx;}
				  .orgPrice{color: #ACACAC;text-decoration: line-through;margin-left: 50rpx;}
				}
			}
		}
	}
	.cover {
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0.5;
	  position: fixed;
	  top: 0rpx;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index: 9;
	}
	.choice-list{
		width: 80vw;
		height: 50vh;
		background: #FFFFFF;
		z-index: 10;
		position: fixed;
		top: 25vh;
		left: 10vw;
		.name-text{
			height:80rpx;
			font-size:32rpx;
			line-height:80rpx;
			color:rgba(51,51,51,1);
			margin-left: 30rpx;
		}
	}
}
</style>